<template>
<div >
    <div class="game-home-header">
        <div style="width: 96%;height: 100%;color: white;display: flex;align-items: center;justify-content: space-between;">
            <span style="letter-spacing: 5px;font-size: large;display: flex;align-items: center;">
                <el-image src="https://www.bnx1314.com/website-api/download/img/static/icon.png" style="width: 54px; height: 54px" />
                <span style="margin-left: 10px;">晴天单机</span>
                <div class="input-container">
                    <input type="text" class="styled-input" placeholder="搜索" v-model="searchGameName">
                    <button class="search-button" type="button" @click="clickSearch">
                        <el-icon size="20" style="margin-top: 2px;"><Search /></el-icon>
                    </button>
                </div>
            </span>
            <div style="display: flex;align-items: center;">
                <el-button type="success"  icon="Guide" @click="clickRemoteServe">远程服务</el-button>
                <el-button type="warning" icon="Star"  v-show="!member.isMember" @click="openRedeem = true">兑换会员</el-button>
                <el-popover trigger="hover"  placement="bottom" :width="160">
                    <p>退出登录</p>
                    <div style="text-align: right; margin: 0">
                    <el-button size="small" type="primary" @click="clickLogout">
                        确认
                    </el-button>
                    </div>
                    <template #reference>
                        <el-avatar :src="avatarUrl" style="border: solid gold 2px;height: 40px;width: 40px;margin-left: 16px;" />
                    </template>
                </el-popover>

            </div>
            
        </div>
        
    </div>

    <div style="display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 86px;">
        <div style="display: flex;justify-content: left;width: 86%">
            <span>推 荐</span>
        </div>
        <el-carousel height="280px" style="width: 86%;cursor: pointer" trigger="click">
            <el-carousel-item v-for="item in recommendGameList" :key="item" @click="clickRecommand(item)">
                <el-image 
                    :src="item.recommendImgUrl" 
                    fit="fill"
                    style="width: 100%;height: 100%;display: block;"
                    
                ></el-image>
            </el-carousel-item>
        </el-carousel>

        <el-tabs 
            id="gameTypeTabs" 
            v-model="activeName" 
            class="demo-tabs" 
            @tab-change="handleClickTab"
        >

            <el-tab-pane v-for="(item, index) in gameMap" :key='index' :label="item.gameTypeName" :name="item.gameTypeId" class="game-pan">
                <div style="width: 100%;height: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;">

                    <div class="game-pan-item" v-for="(gm, idx) in item.gameList" :key="idx" @click="clickGameCard(gm.id)">
                        <el-image 
                            :src="gm.imgUrl"
                            style="width: 100%;height: 60%;border-radius: 6px 6px 0 0"
                        />
                        <div id="game-pane-bottom" style="height: 38%;width: 100%;color: rgba(255, 255, 255, 0.85);display: flex;padding: 0 4px;flex-direction: column;">
                            <div style="width: 100%;display: flex;flex-direction: column;">
                                <div style="font-size: 15px;height:50px;">{{ gm.gameName }}</div>
                                <!-- <div style="font-size: 14px;color: gray;">{{ activeGameTypeName }}</div> -->
                            </div>

                            <div style="display: flex;">
                                <div style="font-size: 14px;color: gray;width: 70%;margin-top: 10px;">{{ activeGameTypeName }}</div>

                                <div style="display: flex;flex-direction: column;justify-content: center;">
                                    <el-button type="primary" size="small" :disabled='!member.isMember' @click.stop='clickDownload(gm)'>下载</el-button>
                                    <!-- <div style="font-size: 12px;margin-top: 10px;color: gold;" v-show='gm.memberValid'>会员免费</div>
                                    <div style="font-size: 12px;margin-top: 10px;color: #F56C6C;" v-show='!gm.memberValid'>未解锁</div> -->
                                </div>
                            </div>
                            
                        </div>
                    </div>

                    <div class="span-game-item"></div>
                    <div class="span-game-item"></div>
                    <div class="span-game-item"></div>
                    <div class="span-game-item"></div>
                    <div class="span-game-item"></div>


                    

                </div>
            </el-tab-pane>

            <!-- <el-tab-pane label="枪战射击" name="first" class="game-pan">
                
            </el-tab-pane>
            <el-tab-pane label="动作冒险" name="second"></el-tab-pane>
            <el-tab-pane label="角色扮演" name="third"></el-tab-pane>
            <el-tab-pane label="策略战棋" name="fourth"></el-tab-pane>
            <el-tab-pane label="即时战略" name="fifth"></el-tab-pane>
            <el-tab-pane label="体育竞速" name="sixth"></el-tab-pane>
            <el-tab-pane label="恐怖惊悚" name="seventh"></el-tab-pane>
            <el-tab-pane label="模拟经营" name="eighth"></el-tab-pane>
            <el-tab-pane label="休闲益智" name="ninth"></el-tab-pane>
            <el-tab-pane label="格斗游戏" name="tenth"></el-tab-pane>
            <el-tab-pane label="手柄游戏" name="eleventh"></el-tab-pane>
            <el-tab-pane label="怀旧合集（需安装）" name="twelvth"></el-tab-pane>
            <el-tab-pane label="硬盘游戏整合包" name="thirteenth"></el-tab-pane> -->
        </el-tabs>

        <div>
            <el-pagination background layout="prev, pager, next" :page-count="pageCount" :current-page="page" style="margin-bottom:10px" @current-change="changePage"/>
        </div>

    </div>

    <el-dialog
      v-model="openDownload"
      title="下载"
      width="500"
      style="user-select: text;"
      append-to-body
    >
      <div>百度网盘: {{ baiduNetDiskUrl }}</div>
      <div>其他: {{ otherNetDiskUrl }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="openDownload = false">取消</el-button>

        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="openRemote"
      title="远程服务"
      width="500"
      style="user-select: none;"
      
    >
      <div>
        平台赠送远程次数以外，需要另行购买，1次远程安装，20元。工具栏里下载好向日葵远程软件（或者todesk），支付20元，添加微信客服，发送远程软件上的远程码，给您远程安装游戏。
      </div>

      <div style="display: flex;justify-content: center">
        <img src="../public/wexin.png" style="width:200px;height: 200px"/>
        <img src="../public/payqr.png" style="width:200px;height: 200px"/>
      </div>
      
    </el-dialog>

    <!-- 兑换 -->
    <el-dialog
      v-model="openRedeem"
      title="兑换码"
      width="500"
      style="user-select: none;"
      
    >
      <div>
        <el-form :model="form" label-width="120px">
            <el-form-item label="兑换码" >
                <el-input v-model="form.redeemCode" style="width: 70%"/>
            </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitRedeem">兑换</el-button>

        </div>
      </template>
      
    </el-dialog>

</div>
</template>

<script>
import {listGame, pageGameByGameTypeIdAndGameName, listRecommendGame, getGameByGameId} from '../api/game.js'
import {listGameType} from '../api/gameType.js'
import {getLoginMember} from '../api/member.js'
import {redeem} from '../api/redeem.js'

export default {
    name: 'GameHome',
    data() {
        return {
            openRedeem: false,
            member: {},
            openRemote: false,
            baiduNetDiskUrl: '',
            otherNetDiskUrl: '',
            openDownload: false,
            activeGameTypeName: '',
            recommendGameList: [],
            openProfile: false,
            searchGameName: '',
            avatarUrl: "https://www.bnx1314.com/website-api/download/img/static/avatar.png",
            activeName: 'first',
            gameMap: [
                
            ],
            page: 1,
            pageSize: 15,
            pageCount: 0,
            form: {redeemCode: ''}
        }
    },

    

    methods: {

        submitRedeem() {
            redeem(this.form.redeemCode).then(resp => {
                this.member.isMember = true
                this.openRedeem = false
            })
        },

        clickRemoteServe() {
            this.openRemote = true
        },
        clickDownload(game) {
            this.baiduNetDiskUrl = game.baiduNetDiskUrl
            this.otherNetDiskUrl = game.otherNetDiskUrl
            this.openDownload = true
            
        },

        clickLogout() {
            
            localStorage.removeItem("token")
            this.$router.replace({path: '/login'})
        },

        clickGameCard(gameId) {
            this.$router.push({name: 'GameDetail',  query: { gameId: gameId }})
        },

        clickSearch() {
            if (this.searchGameName != null) {
                pageGameByGameTypeIdAndGameName(this.activeName, this.searchGameName, this.page, this.pageSize).then(resp => {
                    this.pageCount = resp.data.data.pages
                    const targetGameType = this.gameMap.find(t => t.gameTypeId == this.activeName)
                    if (targetGameType) {
                        targetGameType.gameList = resp.data.data.records
                    }
                })
            }
            
        },

        changePage(newPage) {
            this.page = newPage
            localStorage.setItem('currPage', newPage)
            pageGameByGameTypeIdAndGameName(this.activeName, this.searchGameName, this.page, this.pageSize).then(resp => {
                this.pageCount = resp.data.data.pages
                const targetGameType = this.gameMap.find(t => t.gameTypeId == this.activeName)
                if (targetGameType) {
                    targetGameType.gameList = resp.data.data.records
                }
            })
        },

        // 切换游戏类型
        handleClickTab(tabName) {
            this.page = 1
            pageGameByGameTypeIdAndGameName(tabName, this.searchGameName, this.page, this.pageSize).then(resp => {
                this.pageCount = resp.data.data.pages
                const targetGameType = this.gameMap.find(t => t.gameTypeId == tabName)
                this.activeGameTypeName = targetGameType.gameTypeName
                if (targetGameType) {
                    targetGameType.gameList = resp.data.data.records
                }
            })
        },

        clickRecommand(i) {
            this.$router.push({name: 'GameDetail',  query: { gameId: i.id }})
        }
    },
    created() {
        let token = localStorage.getItem("token")
        let storePage = localStorage.getItem('currPage')
        if (token == null) {
            this.$router.replace({path: '/login'})
            return
        }

        getLoginMember().then(resp => {
            this.member = resp.data.data

        })

        this.page = (storePage != null) ? parseInt(storePage) : 1
        listGameType().then(resp => {
            let gameTypeList = resp.data.data
            this.activeName = gameTypeList[0].id
            for(let i = 0; i < gameTypeList.length; i++) {
                let gameType = gameTypeList[i]
                this.gameMap.push({
                    gameTypeId:gameType.id,
                    gameTypeName: gameType.typeName,
                    gameList: []
                })
            }
            this.activeGameTypeName = gameTypeList[0].typeName
            pageGameByGameTypeIdAndGameName(gameTypeList[0].id, '', this.page, this.pageSize).then(resp => {
                this.pageCount = resp.data.data.pages
                this.gameMap[0].gameList = resp.data.data.records
            })
            
        })

        listRecommendGame().then(resp => {
            let recommendGameList = resp.data.data
            this.recommendGameList = recommendGameList
        })

    }

}
</script>

<style>

#gameTypeTabs .el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}
/* 
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */

.game-home-header {
    z-index: 10;
    width: 100%;
    height: 70px;
    line-height:70px; 
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
}

.demo-tabs {
    width: 88%;
    margin-top: 10px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

#gameTypeTabs , .el-tabs__item {
    color: white !important;
}

#gameTypeTabs , .el-tabs__item.is-active, .el-tabs__item:hover {
    color: var(--el-color-primary) !important;
}

.game-pan {

}

.game-pan-item {

    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.64);
    width: 19%;
    height: 260px;
    margin-bottom: 10px; 
}

.span-game-item {
    /* border: solid black 3px; */
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0);
    width: 19%;
    height: 0;
    
}

.input-container {
    margin-left: 16px;
    width: 300px; /* 你可以根据需要调整宽度 */
    display: flex;
    align-items: center
  }

  .styled-input {
    width: calc(100% - 60px); /* 减去按钮的宽度和间距 */
    padding: 10px 20px; /* 内边距 */
    border: none;
    border-radius: 25px 0 0 25px; /* 左侧半圆和右侧直线边框 */
    background-color: #333; /* 深色背景 */
    color: #e0e0e0; /* 白色文字 */
    outline: none; /* 移除焦点时的轮廓线 */
    box-sizing: border-box; /* 包括内边距和边框在内计算宽度 */
  }

  .search-button {
    /* position: absolute;
    right: 0;
    top: 0; */
    width: 60px; /* 按钮宽度 */
    height: 35px; 
    border: none;
    border-radius: 0 25px 25px 0; /* 右侧半圆边框 */
    background-color: #444; /* 比输入框稍深的背景色 */
    color: #fff; /* 白色文字或图标 */
    cursor: pointer; /* 鼠标悬停时显示为手形 */
    font-size: 16px; /* 字体大小，可以根据需要调整 */
    transition: background-color 0.3s; /* 平滑过渡效果 */
  }

  .search-button:hover {
    background-color: #555; /* 鼠标悬停时背景色变深 */
  }


</style>